import React, {Component} from 'react';
import {Switch, Route, Link} from 'react-router-dom';
import ProductList from "../product/list";
import Home from "../home";
import {Layout, Menu, Breadcrumb, Icon} from 'antd';
const {Header, Sider, Content} = Layout;
const {SubMenu} = Menu;



export default class MainLayout extends Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: false
        };
    }

    onCollapase = (collapsed) => {
        console.log(collapsed);
        this.setState({collapsed});
    }

    render() {
        return (
            <Layout className={'page-layout'}>
                <Sider collapsible
                       collapsed={this.state.collapsed}
                       onCollapse={this.onCollapase}>
                    <div className={'brand-logo'}/>
                    <Menu theme={'dark'} defaultSelectedKeys={['1']} mode={'inline'}>
                        <Menu.Item key={'1'}>
                            <Icon type={'pie-chart'}/>
                            <span>First Menu</span>
                        </Menu.Item>
                        <Menu.Item key={'2'}>
                            <Icon type={'pie-chart'}/>
                            <span>Second Menu</span>
                        </Menu.Item>
                        <SubMenu key={'sub1'}
                                 title={<span><Icon type={'user'}/><span>Third Menu</span></span>}>
                            <Menu.Item key="6">Third Sub Menu 1</Menu.Item>
                            <Menu.Item key="8">Third Sub Menu 2</Menu.Item>
                        </SubMenu>
                    </Menu>
                </Sider>
                <Layout>
                    <Header>Header</Header>
                    <Content className={'page-content'}>
                        <Breadcrumb style={{margin: '16px 0'}}>
                            <Breadcrumb.Item><Link to={'/backend'}>Home</Link></Breadcrumb.Item>
                            <Breadcrumb.Item><Link to={'/backend/product'}>Project</Link></Breadcrumb.Item>
                            <Breadcrumb.Item>List</Breadcrumb.Item>
                        </Breadcrumb>
                        <div className={'page-container'}>
                            <Switch>
                                <Route exact path={'/backend'} component={Home}/>
                                <Route exact path={'/backend/home'} component={Home}/>
                                <Route exact path={'/backend/home/index'} component={Home}/>
                                <Route exact path={'/backend/product'} component={ProductList}/>
                                <Route path={'/backend/product/list'} component={ProductList}/>
                            </Switch>
                        </div>
                    </Content>
                </Layout>
            </Layout>
        );
    }
}